<template>
    <div class="shStudent">
        <h2>学生管理</h2>
        <el-row :gutter="20">
            <el-col :span="24">
                <div class="shStudentList">
                    <el-row>
                        <el-col :span="24">
                            <div>
                                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                    <el-form-item label="学生名称">
                                        <el-input v-model="formInline.stuName" placeholder="请输入用户名称"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" icon="el-icon-search" @click="searchUserList">搜索</el-button>
                                        <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
                                        <el-button type="text" @click="addUser">新增账号</el-button>
                                        <el-button type="warning" icon="el-icon-upload2" @click="importUsers" plain>导入</el-button>
                                        <el-button type="warning" icon="el-icon-download" @click="exportUsers"  plain>导出</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div style="margin-top:20px;">
                                <el-table :data="tableData" border height="350">
                                    <el-table-column type="selection" width="55"> 
                                    </el-table-column>
                                    <el-table-column prop="stuName" label="学生姓名" width="140" align="center">
                                    </el-table-column>
                                    <el-table-column prop="stuCode" label="学籍号" width="120" align="center">
                                    </el-table-column>
                                    <el-table-column prop="shClass.grade" label="年级" align="center">
                                        <template slot-scope="scope">
                                            <span v-if="scope.row.shClass.grade == 1">一年级</span>
                                            <span v-if="scope.row.shClass.grade == 2">二年级</span>
                                            <span v-if="scope.row.shClass.grade == 3">三年级</span>
                                            <span v-if="scope.row.shClass.grade == 4">四年级</span>
                                            <span v-if="scope.row.shClass.grade == 5">五年级</span>
                                            <span v-if="scope.row.shClass.grade == 6">六年级</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="shClass.className" label="班级" align="center">
                                    </el-table-column>
                                    <el-table-column prop="stGrener" label="性别" width="120" align="center">
                                        <template slot-scope="scope">
                                            <span v-if="scope.row.stGrener == 0">男</span>
                                            <span v-if="scope.row.stGrener == 1">女</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="ethnicity.name" label="民族" align="center">
                                    </el-table-column>
                                    <el-table-column prop="guardfianName" label="监护人姓名" width="120" align="center">
                                    </el-table-column>
                                    <el-table-column prop="gdPhone" label="监护人手机号" width="120" align="center">
                                    </el-table-column>
                                    <el-table-column align="center"
                                        label="操作"
                                        width="100">
                                        <template slot-scope="scope">
                                            <el-button @click="toUpdateUser(scope.row)" type="text" size="small">编辑</el-button>
                                            <el-button @click="deleteUser(scope.row)" type="text" size="small">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div class="grid-content bg-purple-dark">
                                <div class="block">
                                    <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page="pageNum"
                                        :page-sizes="[10, 20, 30, 50]"
                                        :page-size="pageSize"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="total">
                                    </el-pagination>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
        <el-dialog title="新增学生" :visible.sync="dialogFormVisible">
            <el-form :model="addSysUser">
                <el-form-item label="学校名称">
                    <!-- <el-input v-model="addSysUser.userName" style="width: 240px;"></el-input> -->
                     <span>皮城大学附属小学</span>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="学生姓名">
                            <el-input v-model="addSysUser.stuName" style="width: 260px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="学籍号">
                            <el-input v-model="addSysUser.stuCode" style="width: 260px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="监护人姓名">
                            <el-input v-model="addSysUser.guardfianName" style="width: 250px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="监护人手机号">
                            <el-input v-model="addSysUser.gdPhone" style="width: 240px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="现居住地址">
                            <el-input v-model="addSysUser.stAddress" style="width: 240px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="民族">
                            <el-select v-model="addSysUser.nationId" placeholder="请选择民族">
                                <el-option
                                    v-for="item in deptOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <!-- <el-col :span="12">
                        <el-form-item label="所属班级">
                            <el-input v-model="addSysUser.nickName"  style="width: 250px;"></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item label="用户性别">
                            <el-select v-model="addSysUser.stGrener" placeholder="请选择性别">
                                <el-option
                                v-for="item in sexOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                            <!-- <el-radio v-model="addSysUser.stGrener" :label="'0'">男</el-radio>
                            <el-radio v-model="addSysUser.stGrener" :label="'1'">女</el-radio> -->
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="toAddSysUser">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改学生" :visible.sync="updialogFormVisible">
            <el-form :model="upSysUser">
                <el-form-item label="学校名称">
                     <span>皮城大学附属小学</span>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="学生姓名">
                            <el-input v-model="upSysUser.stuName" style="width: 260px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="学籍号">
                            <el-input v-model="upSysUser.stuCode" style="width: 260px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="监护人姓名">
                            <el-input v-model="upSysUser.guardfianName" style="width: 250px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="监护人手机号">
                            <el-input v-model="upSysUser.gdPhone" style="width: 240px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="现居住地址">
                            <el-input v-model="upSysUser.stAddress" style="width: 240px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="民族">
                            <el-select v-model="upSysUser.nationId" placeholder="请选择民族">
                                <el-option
                                    v-for="item in deptOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <!-- <el-col :span="12">
                        <el-form-item label="所属班级">
                            <el-input v-model="addSysUser.nickName"  style="width: 250px;"></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item label="用户性别">
                            <el-select v-model="upSysUser.stGrener" placeholder="请选择性别">
                                <el-option
                                v-for="item in sexOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                            <!-- <el-radio v-model="addSysUser.stGrener" :label="'0'">男</el-radio>
                            <el-radio v-model="addSysUser.stGrener" :label="'1'">女</el-radio> -->
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="toUpSysUser">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="用户导入"
            :visible.sync="userImportVisible"
            width="30%">
            <el-upload
                class="upload-demo"
                drag
                action="/api/manager/shStudent/importExcel"
                :on-success="handleExcelImportSuccess"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="userImportVisible = false">确 定</el-button>
                <el-button @click="userImportVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>

import axios from 'axios'

export default {
    name:"ShStudent",
    data() {
        return {
            formInline: {
                stuName: ''
            },
            tableData:[],
            pageNum : 1,
            pageSize: 10,
            total: 0,
            deptOptions: [],
            dialogFormVisible: false,
            updialogFormVisible: false,
            addSysUser: {
                stuName: '',
                stuCode: '',
                guardfianName: '',
                gdPhone: '',
                stAddress: '',
                nationId: '',
                // nickName: '',
                stGrener: ''
            },
            upSysUser: {
                stuName: '',
                stuCode: '',
                guardfianName: '',
                gdPhone: '',
                stAddress: '',
                nationId: '',
                // nickName: '',
                stGrener: ''
            },
            userImportVisible: false,
            sexOptions: [{
                value: '0',
                label: '男'
                }, {
                value: '1',
                label: '女'
            }]
        }
    },
    created(){
        this.searchUserList();
    },
    methods:{
         // 查询
         searchUserList(){
            axios.post("/api/manager/shStudent/pageShStudent?pageNum="+this.pageNum + "&pageSize=" + this.pageSize, this.formInline)
                .then((res) =>{
                    console.log(res)
                    this.tableData=res.data.data.items;
                    this.total = res.data.data.totalElements;
                })
        },
        // 分页
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.searchUserList();
      },
      handleCurrentChange(val) {
        console.log(val);
        this.pageNum = val;
        this.searchUserList();
      },
    //   新增
      addUser(){
        this.dialogFormVisible = true;
        this.ethnicty();
      },
      ethnicty(){
        axios.get("/api/manager/ethnicity/findEthnicityList")
            .then((res) =>{
                console.log(res);
                this.deptOptions = res.data.data
            })
      },
      toAddSysUser(){
        console.log(this.addSysUser)
            axios.post("/api/manager/shStudent/addShStudent", this.addSysUser)
                .then((res) => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: '恭喜你，' + res.data.message,
                            type: 'success'
                        });
                        this.dialogFormVisible = false;
                        this.searchUserList();
                    } else {
                        this.$message.error('错了哦，' + res.data.message);
                    }
                })
      },
    //   修改
      toUpdateUser(row){
        this.updialogFormVisible = true;
        this.ethnicty();
        axios.post("/api/manager/shStudent/findShStudentById?id=" + row.id)
                .then((res) => {
                    console.log(res)
                    this.upSysUser = res.data.data
                })
      },
      toUpSysUser(){
        axios.post("/api/manager/shStudent/updateShStudent", this.upSysUser)
                .then((res) => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: '恭喜你，' + res.data.message,
                            type: 'success'
                        });
                        this.updialogFormVisible = false;
                        this.searchUserList();
                    } else {
                        this.$message.error('错了哦，' + res.data.message);
                    }
                })
      },
    //   删除
      deleteUser(row){
        axios.get("/api/manager/shStudent/delShStudent?id="+row.id)
            .then((res)=>{
                if(res.data.code == 200){
                    this.$message({
                        message: '恭喜你，' + res.data.message,
                        type: 'success'
                    });
                    this.searchUserList();
                } else {
                    this.$message.error('错了哦，' + res.data.message);
                }
            })
      },
    //   重置
      onReset(){
        this.formInline.stuName = '';
        this.searchUserList();
      },
      exportUsers() {
            axios({
                url: '/api/manager/shStudent/exportUsersExcel',
                method: 'post',
                data: this.formInline,
                responseType: 'arraybuffer'  // 接收二进制文件流
            }).then(res => {
                const content = res.data
                const blob = new Blob([content], { type: 'application/octet-stream' })
                const fileName = 'shStudentList.xlsx'

                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    window.navigator.msSaveBlob(blob, fileName)
                } else {
                    const fileUrl = window.URL.createObjectURL(blob)
                    const a = document.createElement('a')
                    a.href = fileUrl
                    a.target = '_blank'
                    a.download = fileName
                    document.body.appendChild(a)
                    a.click()
                    document.body.removeChild(a)
                }
            })
        },
        //导入提示方法
        handleExcelImportSuccess(res) {
            console.log(res);
            // if (res.code == 200) {
            //     this.$message.success('导入成功');
            //     this.searchUserList();
            // } else {
            //     this.$message.error('导入失败')
            // }
        },
        importUsers() {
            this.userImportVisible = true;
        }
    }
}
</script>
<style scoped>

</style>